<template>
	<view>
		<u-navbar title="消息公告"  :autoBack="true">
		</u-navbar>
		<view class="container">
			<view style="background-color: #FFFFFF;border-radius: 48rpx 48rpx 48rpx 48rpx; ">
				<template v-if="list.length">
					<view class="list" v-for="v in list" :key="v.id">
						<view class="item">
							<view class="title">
								{{v.title}}
							</view>
							<view class="content">
								{{v.content}}
							</view>
							<view class="time">
								发布时间：{{v.createtime*1000|formatTimestamp}}
							</view>
						</view>
					</view>
				</template>
				<view v-else style="padding-bottom: 30rpx;">
					<u-empty text="暂无消息'" icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
				</view>
				<u-loadmore style="padding-bottom: 40rpx;" line v-if="list.length&&list.length==total" status="nomore"
					nomore-text="没有更多了" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNotice_api
	} from '@/api/second.js'
	export default {
		filters: {
			formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				const now = new Date();
				const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
				const yesterday = new Date(today);
				yesterday.setDate(today.getDate() - 1);

				if (date >= today) {
					return `${String(date.getFullYear()).padStart(4, '0')}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`;
				} else if (date >= yesterday) {
					return '昨天';
				} else {
					return `${String(date.getFullYear()).padStart(4, '0')}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')} `;
				}
			}
		},
		data() {
			return {
				list: [],
				total: 0,
				paramsData: {
					page: 1
				}
			}
		},
		onLoad() {
			this.getList(1)
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.paramsData.page += 1
				this.getList()
			}
		},
		methods: {
			getList(type = 0) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getNotice_api(this.paramsData).then(res => {
					if (type) {
						this.list = res.data.data
					} else {
						this.list.push(...res.data.data)
					}
					this.total = res.data.total
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 40rpx;
		padding-bottom: 40rpx;
		box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;

		.list {
			padding: 20rpx 40rpx;

			&:first-child {
				padding-top: 40rpx;
			}

			&:last-child {
				padding-bottom: 40rpx;
			}

			.item {
				padding: 40rpx;
				background: #F4F9FD;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				opacity: 1;
				font-size: 28rpx;

				.title {
					font-weight: 700;
					color: #000000;
				}

				.content {
					font-weight: 400;
					color: #91929E;
					padding: 20rpx 0;
				}

				.time {
					font-size: 24rpx;
					color: rgba(145, 146, 158, 0.5);
				}
			}
		}
	}
</style>